<template>
  <div class="appointmentList">
      <div class="top">
          <div class="back" @click="$router.back()">
              <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
                    返回详情
          </div>
          <div class="title">

          </div>
          <div class="invite" @click="$router.push({path:'/appointment/inviteList'})">
              发起邀请
          </div>
      </div>
      <div class="list">
          <div class="item" v-for="(item,uid) in list" :key="uid">
              <div class="upic" >
                  <img :src="item.user.photo">
              </div>
              <div class="udetail">
                  <p>{{item.user.name}}</p>
              </div>
              <div class="other">
                  <p v-if="uid==0">群主</p>
              </div>
          </div>
      </div>      
  </div>
</template>
<script>
export default {
  computed:{
      whoJump(){
          return this.$store.state.choseGroup
      }
  },
  data(){
      return {
          list:[]
      }
  },
  methods:{
      update(){
          let data={
              appointID:this.whoJump.appointID
          }
          this.ylAjax.getAppointMembers(data)
              .then(res=>{
                  let a;
                  this.list=res.data.appointMembers
                  for(let i=0;i<this.list.length;i++){
                      if(this.list[i].userID==res.data.senderID){
                          a=this.list[i]
                          this.list.splice(i,1)
                      }
                  }
                  this.list.unshift(a)
              })
      }
  },
  mounted(){
      this.update()
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
    .appointmentList{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: scroll;
      .top{//导航
          height: 1rem;
          line-height: 1rem;
          background-color: @background-a;
          display: flex;
          color: @color-t;
          font-size: .3rem;
          .back{
              flex:0 0 30%;
              text-align: center;
          }
          .title{
              flex:0 0 40%
          }
          .invite{
              flex: 0 0 30%;
              text-align: center
          }
      }
      .list{
          .item{
              height: 1.22rem;
            //   line-height: 1.22rem;
              display: flex;
              border-bottom: 1px solid @color-border4;
              .upic{
                  flex:0 0 20%;
                  line-height: 1.22rem;
                  text-align: center;
                  img{
                      height: .8rem;
                      border-radius: 50%;
                      vertical-align: middle;
                  }
              }
              .udetail{
                  flex: 0 0 60%;
                  line-height: .6rem
              }
              .other{
                  flex: 0 0 20%;
                  line-height: 1.22rem;
                  text-align: center;
              }
          }
      }        
    }
</style>
